<template>
<div class="header-swiper">
  <mt-swipe :auto="0" class="mt-swipe">
      <mt-swipe-item>
        <van-grid :border="false" :column-num="4">
        <van-grid-item v-for="item in iconsList" :key="item.id">
        <van-image :src="item.imgUrl" />
        <p>{{item.title}}</p>
        </van-grid-item>
        </van-grid>
      </mt-swipe-item>

    <mt-swipe-item>
      <van-grid :border="false" :column-num="4">
        <van-grid-item>
    <van-image src="http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png" />
    <p>游乐场</p>
  </van-grid-item>
  <van-grid-item>
    <van-image src="http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png" />
    <p>全部玩乐</p>
  </van-grid-item>
      </van-grid>
    </mt-swipe-item>
</mt-swipe>

</div>
</template>

<script>
export default {
  props: ["iconsList"],
  data() {
    return {};
  }
};
</script>

<style lang="less" scoped>
.header-swiper {
  margin-top: 3px;
  width: 100%;
  height: 4rem;
}
.mt-swipe .van-grid {
  width: 100%;
  height: 100%;
}
.van-grid-item {
  height: 2rem;
}
.van-image {
  width: 1.1rem;
  height: 1.25rem;
  display: block;
  margin: 0 auto;
  padding-top: 0.2rem;
}
p {
  margin-top: 0.1rem;
  font-size: 0.28rem;
  text-align: center;
  color: #212121;
}
</style>

